<!-- 结构 -->
<script setup lang="ts">
import { ref, watch } from 'vue';

const count = ref(100)
const intro = ref('I am Dragon')
const changeIntro = () => {
    intro.value = 'I am ' + count.value
}

// 1.使用 watch 监听'一个'响应式数据的变化
watch(count, (newValue, oldValue) => {
    console.log('count改变了！');
    console.log(`旧值${oldValue}->新增${newValue}`);
})

// 2.使用 watch 监听'多个'响应式数据的变化
watch([count, intro], (newValue, oldValue) => {
    console.log(`旧值${oldValue}->新增${newValue}`);
})

</script>

<!-- JS逻辑 -->
<template>
    <div class="app-page">

        <div>{{ intro }}</div>
        <button @click="changeIntro">改变</button>

        <hr>

        <div>{{ count }}</div>
        <button @click="count++">改变</button>

    </div>
</template>

<!-- 样式 -->
<style lang="css" scoped></style>